<template>
    <div class="login-page">
        <div class="container">
            <div class="header">
                <img class="logo" src="@/assets/logo.png" alt="" />
                <span class="title">睿云中台</span>
            </div>
            <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules">
                <el-form-item prop="username">
                    <el-input class="moffice-el-input" autofocus v-model="loginForm.username" maxlength="50" placeholder="用户名"></el-input>
                </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                            class="moffice-el-input"
                            maxlength="16"
                            autofocus
                            v-model="loginForm.password"
                            placeholder="密码"
                            :type="showPass ? 'text' : 'password'"
                            @keyup.enter="onLogin"
                            :loading="loading">
                            <template #suffix>
                                <i class="iconfont form-icon form-icon-suf" :class="[showPass ? 'icon-wandkejian2' :'icon-wandbukejian2']" @click="showPass = !showPass"></i>
                            </template>
                        </el-input>
                    </el-form-item>
                <el-form-item>
                    <el-button class="login-btn moffice-el-button moffice-el-button--primary moffice-el-button-h36" @click="onLogin">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useStore } from 'vuex';
import { useRoute} from 'vue-router';
import { pageJump } from '@/global/location-transfer';

const route = useRoute();

// 获取store = vue2中的 this.$store
const store = useStore();

// 是否显示密码
const showPass = ref(false);

// form 表单数据
const loginForm = ref({
    username: '',
    password: ''
});

 // rules 规则证验
const loginRules = ref({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ]
});
// form表单 ref
const loginFormRef = ref(null);
// 登录状态
const loading = ref(false);
// 大小写锁定标识
const capsTooltip = ref(false);


function onLogin () {
    loginFormRef.value.validate((valid) => {
        if(valid) {
            loading.value = true;
            store.dispatch('proxyAction', {
                name: 'login',
                data: {
                    auth_type: 'password',
                    type: 'account',
                    username: loginForm.value.username, // 账号
                    password: loginForm.value.password // 密码
                }
            }).then(async (res) => {
                // 成功
                store.dispatch('setCookie', {
                    data: {
                        'X-DT-accessToken': res.data.access_token
                    }
                })
                let backUrl = decodeURIComponent(route.query.authUrl || '');
                if(backUrl) {
                    pageJump(backUrl);
                }else{
                    try{
                        let menu = await store.dispatch('user/getUserPermissions');
                        let homeRoute = menu?.homeRoute || {};
                        pageJump( homeRoute?.route?.path || { name: 'welcome' });
                    }catch(err){
                        console.log(err);
                        pageJump({ name: 'welcome' });
                    }
                }

            }).catch(err => {
                // 失败
                console.log(err)
            }).finally(() => {
                loading.value = false;
            });
        }
    });
};

</script>

<style lang="scss" scoped>
.login-page {
    width: 100%;
    min-height: 100vh;
    background-image: url(~@/assets/img/login-back.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    :deep(.el-form-item) {
        margin-bottom: 24px;
    }

    .container {
        position: absolute;
        left: 50%;
        background: #ffffff;
        top: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 2px 5px 19px 0px rgba(9, 47, 79, 0.06);
        border-radius: 4px 0px 0px 4px;
        width: 350px;
        padding: 50px 50px;
    }
    .header {
        height: 44px;
        line-height: 44px;
        text-align: center;
        margin-bottom: 50px;
        .logo {
            height: 44px;
            margin-right: 16px;
            vertical-align: top;
            border-style: none;
        }
        .title {
            position: relative;
            font-weight: 600;
            font-size: 33px;
        }
    }
    .form-title {
        margin-top: 40px;
        margin-bottom: 20px;
        text-align: center;
        font-size: 18px;
    }
    .footer {
        color: $--color-text-placeholder;
        text-align: center;
        margin-top: 50px;
    }

    .login-btn {
        width: 100%;
        margin-top: 16px;
        height: 44px;
        font-size: 16px;
    }
    
    .form-icon-suf{
        cursor: pointer;
    }
}
</style>
